.spinner {
  position: relative;
  height: 20px;
  &::after,
  &::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    margin-left: -10px;
    border-radius: 50%;
    z-index: 1000;
  }

  &::after {
    background: $brand-success;
    transform: translateX(-20px);
    animation: moveRight 0.6s linear infinite alternate;
  }

  &::before {
    background: $brand-info;
    transform: translateX(20px);
    animation: moveLeft 0.6s linear infinite alternate;
  }
}


@keyframes moveRight {
  to {
    transform: translateX(20px);
  }
}

@keyframes moveLeft {
  to {
    transform: translateX(-20px);
  }
}
